<template>
	<view class="total">
		<!-- 外卖 -->
		<view class="elm" v-show="isShow === 'true'">
			<view class="top" >
				<image src="/static/img/other/img2.png" style="width: 100%;height: 510rpx;"></image>
				<view class="topm" :style="{'padding-top': height * 1   +  'px'}">
					<!--<view class="topmt" :style="{'padding-top': height * 1   +  'px'}"></view><-->
					<view class="pr tc topmt">
						<view class="img-box" @click="navgateBack">
							<image src="../../static/img/other/to-back.png" mode="heightFix"></image>
						</view>

						<text>饿了么外卖</text>
					</view>
					<view class="tab flex-between">
						<image src="../../static/img/other/icon7.png" class="icon7" mode=""></image>
						<view class="tabm medium now" @click="change(true)">外卖</view>
						<view class="tabm medium" @click="change(false)">果蔬</view>
					</view>
				</view>
				<!--topm end-->
			</view>
			<!--top end-->
			<div class="box">
				<image src="../../static/img/other/img2b.png" style="width: 100%;" mode="widthFix"></image>
				<!--<view class="wxpic"></view>-->
				<view class="golink" @click="tiao_elm">领红包点外卖</view>
			</div>
			<view class="pt30 pl20 lh22 f30 medium" style="color: #fff;padding-bottom: 20rpx;">注意事项:</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				1.必须使用本页的领券入口领券
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				2.饿了么绑定的手机号，需要与领券登录的手机号一致
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				3.无论饿了么新老用户，每个手机号每天可领一次，红包金额随机发放
			</view>
		</view>

		<!-- 果蔬 -->
		<view class="elm1" v-show="isShow === 'false'">
			<view class="top">
				<view class="" >
					<image src="/static/img/other/img33.png" style="width: 100%;height: 510rpx;"></image>
				</view>
				<view class="topm" :style="{'padding-top': height * 1   +  'px'}">
					<!--<view class="topmt" :style="{'padding-top': height * 1   +  'px'}"></view><-->
					<view class="pr tc topmt">
						<view class="img-box" @click="navgateBack">
							<image src="../../static/img/other/to-back.png" mode="heightFix"></image>
						</view>
						<text>饿了么外卖</text>
					</view>
					<view class="tab1 flex-between">
						<image src="../../static/img/other/icon7b.png" class="icon7b" mode=""></image>
						<view class="tabm1 medium" @click="change(true)">外卖</view>
						<view class="tabm1 medium now" @click="change(false)">果蔬</view>
					</view>
				</view>
				<!--topm end-->
			<!-- 	<view class="flex-end topmb" :style="{'padding-top': height * 1   +  'px'}">
					<image src="../../static/img/other/img33.png" style="height:309rpx;width: 684rpx;"></image>
				</view> -->
			</view>
			<!--top end-->
			<!-- style='padding-top: 32rpx;' -->
			<div class="box" >
				<image src="../../static/img/other/img3b.png" style="width: 100%;" mode="widthFix"></image>
				<!-- <view class="wxpic"></view> -->
				<view class="golink1" @click="el_fruits">领红包点外卖</view>
			</div>
			<!-- <view class="pt30 pl20 lh22 f22 medium" style="color: #EAF675;">注意事项</view> -->
			<view class="pt30 pl20 lh22 f30 medium" style="color: #fff;padding-bottom: 20rpx;">注意事项:</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				1.必须使用本页的领券入口领券
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				2.饿了么绑定的手机号，需要与领券登录的手机号一致
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				3.无论饿了么新老用户，每个手机号每天可领一次，红包金额随机发放
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				isShow: true
			};
		}, //data
		components: {


		}, // components
		onShow() {
			this.$nextTick(() => {
				let menu = uni.getMenuButtonBoundingClientRect()
				this.height = menu.top
			})
		}, //onShow
		onLoad(option) {
			// console.log(option)
			this.isShow = option.bol
		},
		methods: {
			//返回
			navgateBack() {
				uni.navigateBack()
			},
			//饿了么果蔬
			tiao_elmgs() {
				uni.navigateTo({
					url: '/subpages/take/elmgs',
				})
			},

			tiao_elm() {
				uni.navigateToMiniProgram({
					appId: 'wxece3a9a4c82f58c9',
					path: 'taoke/pages/shopping-guide/index?scene=QVuyLku'
				})
			},
			el_fruits(){
				uni.navigateToMiniProgram({
					appId: 'wxece3a9a4c82f58c9',
					// path: 'pages/sharePid/web/index?scene=s.click.ele.me%2FOh8vNku'
					path: 'pages/sharePid/web/index?scene=s.click.ele.me%2FxSFkFku'
				})
			},
			
			change(bol){
				// console.log('fdsafasd')
				this.isShow = bol+''
			}
		}, //methods
	}
</script>

<style>
	.elm {
		min-height: 100vh;
		overflow: hidden;
		background-color: #008FE9;
	}
	.elm1{
		min-height: 100vh;
		overflow: hidden;
		background-color: #A6CF44;
	}

	.top {
		position: relative;
	}

	.topm {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		overflow: hidden;
	}

	.topmt {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
	}

	.topmt text {
		color: #fff;
		line-height: 58rpx;
	}

	.topmta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #00A4E9;
		height: 58rpx;
	}

	.img-box {
		padding-right: 20rpx;
		position: absolute;
		left: 24rpx;
		top: 9rpx;
	}

	.img-box image {
		width: 40rpx;
		height: 40rpx;
	}

	.tab {
		width: 370rpx;
		height: 50rpx;
		background: rgba(4, 105, 174, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
	}

	.tabm {
		width: 50%;
		text-align: center;
		color: #ADCDDF;
		font-size: 26rpx;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}

	.tabm.now {
		color: #fff;
	}

	.icon7 {
		position: absolute;
		left: 0;
		top: 0;
		height: 50rpx;
		width: 193rpx;
		z-index: 1;
	}

	.box {
		margin: -65rpx 20rpx 0;
		position: relative;
		z-index: 10;
	}

	.golink {
		width: 538rpx;
		height: 86rpx;
		border-radius: 43rpx;
		position: absolute;
		left: 50%;
		margin-left: -269rpx;
		bottom: 95rpx;
		background: linear-gradient(0deg, #0C8CDC 0%, #01AAFF 100%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.wxpic {
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		margin-left: -130rpx;
		bottom: 168rpx;
		background: #757575;
	}
	

	
	/* 果蔬 */
	.top {
		position: relative;
	}
	
	.topm {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		overflow: hidden;
	}
	
	.topmt {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
	}
	
	.topmt text {
		color: #fff;
		line-height: 58rpx;
	}
	
	.topmta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #00A4E9;
		height: 58rpx;
	}
	
	.img-box image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.tab1 {
		width: 370rpx;
		height: 50rpx;
		background: rgba(194, 229, 110, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
	}
	
	.tabm1 {
		width: 50%;
		text-align: center;
		color: #D5F094;
		font-size: 26rpx;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}
	
	.tabm1.now {
		color: #fff;
	}
	
	.topmb {
		margin-top: 132rpx;
	}
	
	.icon7b {
		position: absolute;
		right: 0;
		top: 0;
		height: 50rpx;
		width: 193rpx;
		z-index: 1;
	}
	
	.box {
		margin: 0 20rpx;
		position: relative;
		z-index: 10;
	}
	
	.golink1 {
		width: 538rpx;
		height: 86rpx;
		border-radius: 43rpx;
		position: absolute;
		left: 50%;
		margin-left: -269rpx;
		bottom: 95rpx;
		background: linear-gradient(0deg, #769B1A 0%, #98CB1F 100%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 30rpx;
	}
	
	.wxpic {
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		margin-left: -130rpx;
		bottom: 168rpx;
		background: #757575;
	}
</style>
